<template>
  <div id='systemAlarm'>
    <vue-seamless-scroll :data="data" class="seamless-warp" :class-option="classOption">
      <div class="box">
        <div v-for="(item,index) in data" :key="index">
          <div class="box-head">
            <!-- <div>{{item.title}}</div> -->
            <div>系统告警</div>
            <div>{{item.alarmTime}}</div>
          </div>
          <div class="box-content">
            <span>{{item.serialNo}}{{item.alarmDesc}}</span>
          </div>
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import { getAlarmLogMinVOLog } from '@/api/api.js';
import { mapGetters } from 'vuex';

import vueSeamlessScroll from 'vue-seamless-scroll';

export default {
  name: 'systemAlarm',
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      data: [
        // {
        //   title: '系统告警',
        //   time: '2022-04-08 16:18:44',
        //   message: 'CPU占用率超过阈值，请及时检查！',
        // },
        // {
        //   title: '系统告警',
        //   time: '2022-04-08 16:18:44',
        //   message: 'CPU占用率超过阈值，请及时检查！',
        // },
        // {
        //   title: '系统告警',
        //   time: '2022-04-08 16:18:44',
        //   message: 'CPU占用率超过阈值，请及时检查！',
        // },
        // {
        //   title: '系统告警',
        //   time: '2022-04-08 16:18:44',
        //   message: 'CPU占用率超过阈值，请及时检查！',
        // },
        // {
        //   title: '系统告警',
        //   time: '2022-04-08 16:18:44',
        //   message: 'CPU占用率超过阈值，请及时检查！',
        // },
      ],
    };
  },
  computed: {
    ...mapGetters(['location']),
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  created() {
    // if (process.client){}
  },
  mounted() {
    this.getList();
  },
  beforeCreate() {},
  beforeMount() {},
  methods: {
    async getList() {
      const res = await getAlarmLogMinVOLog({
        sysKey: 'zzyearthquakewarning',
      });
      if (res.code == 200) {
        this.data = res.data;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
#systemAlarm {
  width: 100%;
  height: 100%;
}
.seamless-warp {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.box {
  width: 100%;
  height: 100%;

  > div {
    width: 100%;
    height: 88px;
    background: #fff2f0;
    border-radius: 5px;
    margin: 3px 0;
    padding: 8px;
    font-size: 14px;
    .box-head {
      display: flex;
      justify-content: space-between;
      line-height: 27px;
      text-align: center;
      color: rgba(0, 0, 0, 0.65);
      > div:nth-child(1) {
        width: 84px;
        height: 27px;
        background: #ff7875;
        border-radius: 5px;
        color: #ffffff;
      }
    }
    .box-content {
      margin: 8px 0;
      max-height: 35px;
      line-height: 35px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
</style>